<template>
  <Panel title="设备列表" width="380px">
    <div class="chart-container">
      <div class="chart" ref="chartRef"></div>
      <div class="status">
        <div class="status-item">
          <span class="list-style" :style="{ backgroundColor: '#29ec78' }"></span>
          <div>正常</div>
          <div :style="{ color: '#29ec78' }">13.02%</div>
        </div>
        <div class="status-item">
          <span class="list-style" :style="{ backgroundColor: '#898989' }"></span>
          <div>离线</div>
          <div :style="{ color: '#898989' }">13.02%</div>
        </div>
        <div class="status-item">
          <span class="list-style" :style="{ backgroundColor: '#FF0000' }"></span>
          <div>报警</div>
          <div :style="{ color: '#FF0000' }">13.02%</div>
        </div>
        <div class="status-item">
          <span class="list-style" :style="{ backgroundColor: '#FE8D3B' }"></span>
          <div>故障</div>
          <div :style="{ color: '#FE8D3B' }">13.02%</div>
        </div>
      </div>
    </div>
    <DeviceTable :data="deviceList"></DeviceTable>
  </Panel>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";

import DeviceTable from "./DeviceTable.vue";

const deviceList = ref([
  { id: "1", img: "img", name: "消防栓A", code: "A001", area: "1楼a区", status: "正常" },
  { id: "2", img: "img", name: "消防栓A", code: "A002", area: "1楼b区", status: "正常" },
  { id: "3", img: "img", name: "消防栓A", code: "A003", area: "1楼c区", status: "离线" },
]);

let chart;
onMounted(() => {
  chart = echarts.init(chartRef.value);
  chart.setOption(chartOption.value);
});

const chartRef = ref();

const chartOption = ref({
  legend: {
    show: false,
  },
  toolbox: {
    show: false,
  },
  series: [
    {
      type: "pie",
      itemStyle: {
        borderRadius: 8,
      },
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 12, name: "正常", itemStyle: { color: "#29ec78" } },
        { value: 38, name: "离线", itemStyle: { color: "#898989" } },
        { value: 32, name: "报警", itemStyle: { color: "#FF0000" } },
        { value: 30, name: "故障", itemStyle: { color: "#FE8D3B" } },
      ],
    },
  ],
});
</script>
<style lang="scss" scoped>
.chart-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  .status {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .chart {
    flex: 1;
    height: 160px;
  }
}
.status-item {
  position: relative;
  height: 24px;
  padding-left: 24px;
  border-bottom: 1px solid #ffffff20;
  border-bottom-left-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c4c4c4;
  font-size: 12px;
  .list-style {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    border-radius: 50%;

    &::after {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      border: 1px solid #ffffff20;
      border-radius: 50%;
      flex-shrink: 0;
    }
  }
}

</style>
